<template>
  <div :id="id" :style="{ width, height }">

  </div>
</template>
  
<script lang='ts' setup>
import { CommonUtil } from '@/utils';
import { onMounted } from 'vue';
export interface IPieChartDataType {
  value: number
  name: string
}
export interface IChartStyleType {
  innerRadius?: string
  intervalColor?: string
  intervalSize?: number
  colorList?: string[]
}

export interface IPieChartPropType {
  id: string
  width?: string
  height?: string
  data: IPieChartDataType[],
  chartStyle?: IChartStyleType
}
const props = withDefaults(defineProps<IPieChartPropType>(), {
  width: '80%',
  height: '80%'
})

let echarts = CommonUtil.getVue3GlobalAttribute('$echarts')
let pieChart
onMounted(() => {
  pieChart = echarts.init(document.querySelector(`#${props.id}`))
  pieChart.setOption({
    color: props.chartStyle?.colorList || ['#fcc246', '#53fd47', '#47c6fd', '#cffd47'],
    tooltip: { show: false },
    legend: { show: true },
    series: [
      {
        type: 'pie',
        radius: [props.chartStyle?.innerRadius || '30%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 0,
          borderColor: props.chartStyle?.intervalColor || '#fff',
          borderWidth: props.chartStyle?.intervalSize || 2  
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold',
            formatter: (params: any) => {
              return '{a|' + params.name + '}\n{b|' + params.value + '}'
            },
            rich: {
              a: {},
              b: {}
            }
          }
        },
        data: props.data
      }
    ]
  })
})


</script>
  
<style lang='scss' scoped>
a{
  color: #47c6fd;
}
</style>
  